<template>
  <div class="divBox">
    <div class="header clearfix">
      <div class="container">
        <search-form :model="searchParams" @search="search">
          <a-form-item title="优惠卷名称：">
            <a-input v-model:value="searchParams.keywords" placeholder="请输入优惠券名称" class="selWidth" size="small">
              <a-button slot="append" icon="a-icon-search" size="small" @search="search" />
            </a-input>
          </a-form-item>
        </search-form>
      </div>
    </div>

    <g-table ref="tableRef" rowKey="id"
      :rowSelection="props.handle === 'wu' ? { selectedRowKeys: selectId, onChange: (selectedRowKeys, selectedRows) => onSelectChange(selectedRows) } : undefined"
      :columns="columns" row-key="id" :api="marketingSendApi" :params="searchParams" />
  </div>
</template>

<script setup lang="tsx">
import { marketingListApi, couponUserApi, marketingSendApi } from '@/api/marketing'
import { Modal } from 'ant-design-vue';
const props = withDefaults(
  defineProps<{
    handle?: string;
    couponData?: any[]
    keyNum?: number
    userIds?: string
    userType?: string
  }>(),
  {
    handle: ''
  }
);

const searchParams = reactive({
  keywords: '',
  type: ''
});
watchEffect(() => {
  // searchParams.type = props.userType ? 1 : 3
})
let selectId = $ref<string[]>([])
const { tableRef, columns, search } = useTable<Icategory>([
  { title: "ID", dataIndex: "id", },
  { title: "优惠券名称", dataIndex: "name" },
  { title: "优惠券面值", dataIndex: "money" },
  {
    title: "最低消费额", dataIndex: "minPrice",
    customRender: ({ record }) => (
      <span>{record.minPrice === 0 ? '不限制' : record.minPrice}</span>
    ),
  },
  {
    title: "有效期限", dataIndex: "minPrice",
    customRender: ({ record }) => (
      <span>{record.isFixedTime === 1 ? record.useStartTime + ' 一 ' + record.useEndTime : '不限制'}</span>
    ),
  },
  {
    title: "剩余数量", dataIndex: "minPrice",
    customRender: ({ record }) => (
      <span>{!record.isLimited ? '不限量' : record.lastTotal}</span>
    ),
  },
  props.handle == 'send' ? {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => sendGrant(record.id)}>发送</table-button>
      </>
    ),
  } : {}
]);
const emit = defineEmits(['getCouponId', 'sendGrant'])
// 记忆选择核心方法

const onSelectChange = (rows: any[]) => {
  selectId = rows.map((e: any) => e.id)
  emit('getCouponId', rows)
};
// 发送
function sendGrant(id: string) {
  Modal.confirm({
    title: '提示',
    content: '是否发送优惠劵',
    onOk() {
      couponUserApi({ couponId: id, uid: props.userIds }).then(() => {
        AntMessage.success("发送成功");
        emit('sendGrant')
      })
    },
  });
}
</script>

<style scoped lang="scss">
.selWidth {
  width: 219px !important;
}

.show {
  display: revert;
}

.hidden {
  display: none;
}

.seachTiele {
  line-height: 35px;
}

.fr {
  float: right;
}
</style>
